<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX的POST请求传参</title>
</head>
<body>
<h1>AJAX的POST请求传参</h1>

<table>
    <tr>
        <td>用户名:</td>
        <td><input type="text" name="" id="uname"></td>
    </tr>
    <tr>
        <td>密码:</td>
        <td><input type="password" name="" id="pwd"></td>
    </tr>
    <tr>
        <td><input type="button" value="传递数据-str" onclick="submitForm1()"></td>
        <td><input type="button" value="传递数据-json" onclick="submitForm2()"></td>
    </tr>
</table>
<script>
    function submitForm1() {
        // 获取input里面的数据
        uname = document.getElementById('uname').value
        pwd = document.getElementById('pwd').value

        // 拼接参数
        args = 'uname=' + uname + '&pwd=' + pwd

        // 创建xhr对象
        let xhr = new XMLHttpRequest()

        // 设置请求的方式与请求地址
        xhr.open('POST', 'http://httpbin.org/post')

        // 设置请求内容的类型(推荐)
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

        // 发送请求
        xhr.send(args)

        // 获取服务器响应
        xhr.onload = () => {
            console.log(xhr.responseText)
        }
    }

    function submitForm2() {
        // 获取input里面的数据
        uname = document.getElementById('uname').value
        pwd = document.getElementById('pwd').value

        // 拼接参数
        args = {'uname': uname, 'pwd': pwd}
        args = JSON.stringify(args)

        // 创建xhr对象
        let xhr = new XMLHttpRequest()

        // 设置请求的方式与请求地址
        xhr.open('POST', 'http://httpbin.org/post')

        // 设置请求内容的类型(推荐)
        xhr.setRequestHeader('Content-Type', 'application/json')

        // 发送请求
        xhr.send(args)

        // 获取服务器响应
        xhr.onload = () => {
            console.log(xhr.responseText)
        }
    }
</script>
</body>
</html>